<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>模板语法</title>
    <!--引入Vue-->
    <script type="text/javascript" src="./js/vue.js"></script>
</head>

<body>
    <div id="root">
        <!--插值语法:{{}}-->
        <h1>helLO{{message}}</h1>
        <div>{{dengziqi.message}}</div>
        <!--指令语法:v-bind-->
        <a v-bind:href="url">{{ai}}</a>
        <div v-bind:style="ax_,wes">DD</div>
        <div></div>

    </div>
</body>
<script>
    //模板语法: 一个实例中的html代码被称为模板语法 ， 
    //root容器的代码被称为Vue模板
    //Vue模板语法2大类:
    //1.插值语法：{{}}
    //2.指令语法:用于解析标签：（标签属性，标签体内容，绑定事件...）
    //举例:v-bind

    const vm = new Vue({
        el: '#root',
        data: {
            message: '周杰伦',
            url: 'https://cn.vuejs.org/',
            ai: '邓紫棋的个人网站',
            dengziqi: {
                message: '邓紫棋',
            },

            ax_: 'color:red',
            wes: 'background-color: green'

        }

    });
</script>

</html>